<h2 class="heading" data-id="heading-0">小册简介</h2>
<p>你可能会看到这样的效果：
</p><figure><img alt="知乎登录背景" class="lazyload inited" data-src="https://user-gold-cdn.xitu.io/2017/11/15/15fbdb605b34a9e7?imageslim" data-width="960" data-height="640" src="data:image/svg+xml;utf8,&lt;?xml version=&quot;1.0&quot;?&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; width=&quot;960&quot; height=&quot;640&quot;&gt;&lt;/svg&gt;"><figcaption></figcaption></figure><p></p>
<p>又或者这样的：
</p><figure><img alt="QQPC介绍页面" class="lazyload inited" data-src="https://user-gold-cdn.xitu.io/2017/11/15/15fbdb6d03861530?imageslim" data-width="960" data-height="640" src="data:image/svg+xml;utf8,&lt;?xml version=&quot;1.0&quot;?&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; width=&quot;960&quot; height=&quot;640&quot;&gt;&lt;/svg&gt;"><figcaption></figcaption></figure><p></p>
<p>还可能是这样的：
</p><figure><img alt="http://cherryblog.site/" class="lazyload inited" data-src="https://user-gold-cdn.xitu.io/2017/11/15/15fbdba8bc88ca28?imageslim" data-width="960" data-height="640" src="data:image/svg+xml;utf8,&lt;?xml version=&quot;1.0&quot;?&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; width=&quot;960&quot; height=&quot;640&quot;&gt;&lt;/svg&gt;"><figcaption></figcaption></figure><p></p>
<p>笔者博客地址：<a target="_blank" href="http://cherryblog.site/" rel="nofollow noopener noreferrer">cherryblog.site</a> ٩(๑&gt;◡&lt;๑)۶</p>
<p>你是不是被上面几个例子中的背景所吸引，很好奇这些背景是怎么实现的？是否也想让自己的个人网站有同样炫酷且与众不同的背景呢？</p>
<p>本小册将会帮你解答这个问题：如何使用 Canvas 制作出炫酷的网页背景特效。</p>
<p>你可能好奇这种效果是怎么做到的呢？其实答案很简单，就是 HTML5 的新标签 —— Canvas。</p>
<p>Canvas 自 HTML5 发布以来就受到了广泛的关注，但却很少在项目中使用，所以大部分前端攻城狮都只是知道，很少实践。</p>
<p>本小册将带你进入 Canvas 的世界，为你展示 30+ 个 Canvas 项目，你会惊叹于 Canvas 所制作出的神奇效果。</p>
<p>同时会带大家从零开始学习 Canvas：从零开始，教你绘制出基本图形。通过组合这些基本图形，将产生不可思议的化学反应~</p>
<p>在入门了 Canvas 之后，将带大家分析那些可以作为背景的 Canvas 炫酷特效，总结出这些炫酷特效都有哪些特点。日后这些就是你的思想武器。掌握了这些规律，你就相当于站在了巨人的肩膀上，再制作炫酷的网页背景特效将会事半功倍。</p>
<p>在了解了这些特点之后，我们将通过一个具体的案例来一起实现一下这些特效。</p>
<p>最终， Canvas 基础知识 + 特效特点 + 你丰富的想象力 = 属于你自己的炫酷网页背景特效。</p>
<p><strong>划重点：本小册的所有特效，都会将源码分享给大家~&nbsp;(｡♥‿♥｡)</strong></p>
<h3 class="heading" data-id="heading-1">你会学到什么？</h3>
<ul>
<li>了解基本的 Canvas API</li>
<li>使用 Canvas 绘制基本图形和特效</li>
<li>了解 Canvas 常见特效的“套路”</li>
<li>制作出属于你自己的 Canvas 背景特效</li>
</ul>
<h3 class="heading" data-id="heading-2">你应该已经了解什么？</h3>
<ul>
<li>一定的前端基础（包括但不限于 HTML5、CSS3、JavaScript）；</li>
<li>一丢丢的数学知识（高数能及格的水平就好）~</li>
</ul>
<h3 class="heading" data-id="heading-3">你需要准备什么？</h3>
<ul>
<li>一台电脑</li>
<li>一颗认真学习的心</li>
<li>一杯咖啡</li>
</ul>
<h2 class="heading" data-id="heading-4">购买须知</h2>
<ol>
<li>本小册为图文形式内容服务，共计 9 节，上线时间为 2017 年 11 月 22 日；</li>
<li>购买用户可享有小册永久的阅读权限；</li>
<li>购买用户可进入小册微信群，与作者互动；</li>
<li>掘金小册为虚拟内容服务，一经购买成功概不退款；</li>
<li>掘金小册版权归北京北比信息技术有限公司所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；</li>
<li>在掘金小册阅读过程中，如有任何问题，请邮件联系 <a target="_blank" href="mailto:xiaoce@xitu.io" rel="nofollow noopener noreferrer">xiaoce@xitu.io</a></li>
</ol>
